<template>
	<view class="p-2">
		<cl-navbar :title="$t('my.index.purse')" leftIconSize="40rpx" placeholder autoBack>
			<template slot="right">
				<text style="color: #3b60ce;font-size: 28rpx;line-height: 40rpx;" @click="editPsw">修改支付密码</text>
			</template>
		</cl-navbar>
		<view style="background-color: #24429c;position: relative;border-radius: 20rpx;margin: 50rpx 30rpx;">
			<view style="padding: 50rpx 40rpx 30rpx;display: flex;flex-direction: column;">
				<!-- 账户余额 -->
				<text style="font-size: 32rpx;">{{$t('user.balance')}}</text>
				<!-- <text class="colorZ font46 pt-1">{{$store.state.user.ismoeny}}</text> -->
				<text style="font-size: 46rpx;padding-top: 10rpx;">{{ money ? (money*100/100).toFixed(2) : '0.00'}}</text>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: center;gap: 50rpx;padding-bottom: 50rpx">
				<view style="background-color: #fff;width: 200rpx;padding: 15rpx 0;text-align: center;color: #2c469a;border-radius: 50rpx;" @click="popKefu('充值')">充值</view>
				<view style="border: 1rpx solid #fff;width: 198rpx;padding: 13rpx 0;text-align: center;color: #fff;border-radius: 50rpx;"  @click="popKefu('提现')">提现</view>
			</view>
			<view style="position: absolute;top: 0;right: 0;">
				<u--image :showLoading="true" src="/static/icon/accbg.png" width="50px" height="50px"></u--image>
			</view>
		</view>
		<view>
			<u-popup :show="kefushow" @close="kefushow = false" bgColor="transparent">
				<view style="display: flex;flex-direction: column;align-items: center;padding-bottom: 20rpx;">
					<view style="box-sizing: border-box;padding:50rpx 30rpx;display: flex;flex-direction: column;border-radius: 15rpx;align-items: center;text-align: center;background-color: #1e1f30;width: 720rpx;">
						<text style="font-size: 30rpx;">请联系客服进行{{tip}}</text>
						<text style="margin-top: 10rpx;font-size: 30rpx;">24小时无休提供服务</text>
						<text style="margin-top: 30rpx;color: #4976ff;font-size: 30rpx;" @click="gokefu">立即联系</text>
					</view>
					<view @click="kefushow = false" style="background-color: #1e1f30;border-radius: 15rpx;width: 720rpx;margin-top: 20rpx;text-align: center;padding: 25rpx 0;color: #4976ff;font-size: 30rpx;">取消</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				money: '',
				kefushow:false,
				tip:'',
			};
		},
		onLoad(){
			this.getInfo()
		},
		computed: {
			...mapState({
				mykefu: state => state.friends.mykefu,
			}),
		},
		methods: {
			popKefu(name){
				this.tip = name
				this.kefushow = true
			},
			getInfo(){
				uni.$api.user.getBalance().then(res=>{
					if(res && res.code == 200){
						this.money = res.data.virtual_conis_balance
					}
				})
			},
			editPsw(){
				this.$Router.push({
					name: 'payPassword'
				});
			},
			gokefu(){
				if (this.mykefu) {
					this.$Router.push({
						name: 'chatMsg',
						params: {
							friend_idx: this.mykefu.user_id,
							nick_name: this.mykefu.nick_name,
							avatar_url: this.mykefu.avatar_url,
						}
					});
				} else {
					uni.showToast({
						title: this.$t("astral.details.noContact"),
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">

	.vip-main {
		border-radius: 10px 10px 0 0;
	}

	.vip-item {
		background-color: #1b1c31;
		border: solid 1rpx rgba(227, 186, 129, 0.1);
	}

	.border-active {
		border-color: #9b7735;
	}
</style>